<template>
  <!--  -->
  <div class="aui-card--fill scroll-box card-box">
    <div class="management-box">
      <div class="pane-shell margin-bottom-15 header">
        <div class="action-bar">
          <el-form :inline="true"
                   @submit.native.prevent
                   :model="dataForm"
                   ref="dataForm"
                   @keyup.enter.native="search">
            <el-form-item>
              <el-select v-model="dataForm.status"
                         placeholder="全部状态"
                         clearable>
                <el-option v-for="item in messageType"
                           :key="item.status"
                           :label="item.information"
                           :value="item.status">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="dataForm.type"
                         placeholder="全部类型"
                         clearable>
                <el-option v-for="item in statusOptions"
                           :key="item.type"
                           :label="item.dictName"
                           :value="item.type">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="startDate">
              <!-- <el-select
                v-model="dataForm.startDate"
                placeholder="开始时间"
                clearable
              > -->
              <div class="block">
                <span class="demonstration"></span>
                <el-date-picker v-model="dataForm.startDate"
                                type="datetime"
                                placeholder="选择开始日期时间">
                </el-date-picker>
              </div>
              <!-- </el-select> -->
            </el-form-item>
            <el-form-item prop="endDate">
              <div class="block">
                <span class="demonstration"></span>
                <el-date-picker v-model="dataForm.endDate"
                                type="datetime"
                                placeholder="选择结束日期时间">
                </el-date-picker>
              </div>
              <!-- <el-select
                class="block"
                v-model="dataForm.endDate"
                placeholder="结束时间"
                clearable
              >
                <span class="demonstration"></span>
                <el-option
                  v-for="item in statusOptions"
                  :key="item.dictValue"
                  :label="item.dictName"
                  :value="item.dictValue"
                >
                </el-option>
              </el-select> -->
            </el-form-item>
            <el-form-item>
              <el-button type="primary"
                         @click="search">查询</el-button>
            </el-form-item>
            <el-form-item style="margin-left: 30px">
              <el-button @click="beenread()">全部已读</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="main theme-bg-color">
          <table-template :loading="dataListLoading"
                          :fieldManagement="false"
                          :index="true"
                          :dataList="dataList">
            <el-table-column prop="type"
                             label="类型"
                             header-align="center"
                             align="center"><template slot-scope="scope">
                <div v-if="scope.row.type === '0'">普通消息</div>
                <div v-else-if="scope.row.type === '1'">预警消息</div>
              </template>
            </el-table-column>
            <el-table-column prop="title"
                             label="标题"
                             header-align="center"
                             align="center"></el-table-column>
            <el-table-column prop="content"
                             label="消息内容"
                             header-align="center"
                             align="center"></el-table-column>
            <el-table-column prop="createDate"
                             label="时间"
                             header-align="center"
                             align="center"></el-table-column>

            <el-table-column prop="status"
                             label="状态"
                             header-align="center"
                             align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.status === '0'">未读</div>
                <div v-else-if="scope.row.status === '1'">已读</div>
              </template>
            </el-table-column>
            <el-table-column :label="$t('handle')"
                             fixed="right"
                             header-align="center"
                             align="center"
                             width="180">
              <template slot-scope="scope">
                <el-button :disabled="scope.row.status === '1'"
                           type="text"
                           size="small"
                           @click="dataFormSubmitHandle(scope.row)">标记已读</el-button>
              </template>
            </el-table-column>
          </table-template>

          <el-pagination :current-page="page"
                         :page-sizes="[10, 20, 50, 100]"
                         :total="total"
                         layout="total, sizes, prev, pager, next"
                         @size-change="pageSizeChangeHandle"
                         @current-change="pageCurrentChangeHandle">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
/* eslint-disable */
import mixinViewModule from "@/mixins/view-module";
import formValidate from "@/mixins/form-validate";
import tableTemplate from "@/components/table-template";
export default {
  mixins: [mixinViewModule, formValidate],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: "tb/news/listNews",
        getDataListIsPage: true,
        deleteURL: "",
      },
      loading: null,
      messageType: [
        {
          information: "未读",
          status: "0",
        },
        {
          information: "已读",
          status: "1",
        },
      ],
      statusOptions: [
        {
          dictName: "普通消息",
          type: "0",
        },
        {
          dictName: "预警消息",
          type: "1",
        },
      ],
      startDate: "",
      endDate: "",
      addVisible: false,
      dialogFormVisible: false,
      dataForm: {
        status: "",
        useStatus: "",
        peopleNumber: "",
        carNumber: "",
        id: "",
      },
    };
  },
  mounted() {},
  components: {
    tableTemplate,
    // NavBar
  },
  computed: {},
  methods: {
    beenread() {
      this.$http.put(`tb/news/readAll`, {}).then(({ data: res }) => {
        if (res.code == 0) {
          this.getDataList();
          this.RecTcpMessage()
          return this.$message({
            message: "修改成功",
            type: "success",
          });
        }
        // this.isfinish = false
      });
    },
    dataFormSubmitHandle(data) {
      this.dataForm.id = data.id;
      // if (this.dataForm.status === "1") {
      //   return this.$message({
      //     message: "您已经标记过了！",
      //     type: "warning",
      //   });
      // }
      this.$http
        .put(`tb/news/updateStatus`, {
          id: this.dataForm.id,
        })
        .then(({ data: res }) => {
          if (res.code == 0) {
            this.getDataList()
            this.RecTcpMessage()
            return this.$message({
              message: "修改成功",
              type: "success",
            });
          }
          // this.isfinish = false
        });
    },
    RecTcpMessage () {
        this.$bus.$emit('On_Navbar_RecTcpMessage');
    },
    // 查询
    search() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.getPageInit();
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.user-dialog {
  background: rgba(0, 0, 0, 0.5);
}
.download {
  text-decoration: none;
  color: #fff;
}
.tree-input {
  width: 100%;
  position: relative;
  .close {
    position: absolute;
    right: 10px;
    top: 13px;
    font-size: 16px;
    color: #858585;
    cursor: pointer;
    background-color: white;
  }
}
.management-box {
  width: 100%;
  height: 100%;
  .main {
    position: relative;
    width: 100%;
    min-height: 100%;
  }
}
</style>
